﻿
@{
    ViewBag.Title = "Classification";
    Layout = "~/Views/MusciShopMasterPage.cshtml";
}
<link rel="stylesheet" href="~/Content/ClassificationData.css">
<div class="classificationBig" id="classificationApp">
    <div class="classificationText">
        <span>专辑</span>
        <div class="classificationTypeList">
            <span>分类</span>
            <ul>
                <li>原版</li>
                <li>签名版</li>
                <li>内地引进版</li>
                <li>演唱会DVD/LIVE</li>
                <li>限量版</li>
                <li>贴纸/文件夹/笔记本</li>
            </ul>
        </div>
        <div class="classificationTypeList" style="border: 1px solid rgba(128,128,128,0.4);">
            <span>公司</span>
            <ul style="flex-wrap:wrap">
                <li>MBK Entertainment</li>
                <li>环球唱片</li>
                <li>艺人工作室</li>
                <li>英皇娱乐</li>
                <li>Fantagio</li>
                <li>乐华娱乐</li>
                <li>Woolim</li>
                <li>WM Entertainment</li>
                <li>相信音乐</li>
                <li>TS Entertainment</li>
                <li>环球中国</li>
                <li>华纳唱片</li>
                <li>天娱传媒</li>
            </ul>
        </div>
    </div>
    <div class="classificationList">

        <div class="classificationLi" v-for="item in classificationLiData">
            <div class="classificationImage" style="background-image: url(../image/im2.jpg);"></div>
            <div class="classificationLiText">
                <span>{{item.Name}}</span>
                <div class="classificationLiTextUnit">
                    <span>¥{{item.Unit}}</span>
                    <div class="classificationLiTextUnitImage" id="no">
                        <div></div>
                        <span>{{item.Great}}</span>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/vue.js"></script>
<script>
    $(function () {
        var myv = new Vue({
            el: "#classificationApp",
            data: {
                classificationLiData: []
            }
        });

        (function () {
            $.get("../DataJson/classificationListData.json", {}, function (data) {
                myv.$data.classificationLiData = data.classificationLi;
            })
        })();

        $(".classificationList").on("click", ".classificationImage", function () {
            location = "/Musc_Shop/Details";
        })
        $(".classificationList").on("click", ".classificationLiTextUnitImage", function () {
            console.log("emmm")
            var a = parseInt($(this).children("span").text());
            if ($(this).attr("id") == "no") {
                $(this).children("span").text(a + 1);
                $(this).attr("id", "yes");
                $(this).children("div").css("backgroundPosition", "-15px 82%")
            } else {
                $(this).children("span").text(a - 1);
                $(this).attr("id", "no");
                $(this).children("div").css("backgroundPosition", "3px 82%")
            }
        });


    })
</script>

